<!--
 * @Author: your name
 * @Date: 2021-12-03 14:23:18
 * @LastEditTime: 2021-12-06 11:49:32
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\Home\xmxz\right\tuli.vue
-->
<template>
  <div class="wrap" v-if="tuliPolygonData">
    <div class="hexs">
      <div
        class="hex"
        v-for="(item, index) in hexData"
        :key="index"
        @click="tuliClick(item)"
      >
        <div
          class="color"
          :style="
            item.active === true
              ? { background: item.hex }
              : { background: '#ffffff' }
          "
        ></div>
        <div class="text">{{ item.type }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      hexData: null,
      val2: true,
    };
  },
  computed: {
    ...mapState("Sjsx", [
      "tuliData",
      "isRegion",
      "tuliPolygonData",
      "tuliPolylineData",
    ]),
  },
  watch: {
    tuliData() {
      this.getData();
    },
    deep: true,
  },
  methods: {
    getData() {
      console.log("%c tuliData", "color:red", this.tuliData);
      if (!this.tuliData || this.tuliData.length === 0) return;
      let hexData = this.tuliData[this.tuliData.length - 1].hex.map((item) => {
        return {
          layer_class_field: item.layer_class_field,
          field_value: item.field_value,
          hex: item.hex,
          type: item.type,
        };
      });
      hexData.forEach((element) => {
        console.log(element, "element的值");
        element["active"] = true;
      });
      console.log(hexData, "hexData的值");

      this.hexData = hexData;

      // 去重
      this.hexData = this.arrayUnique(this.hexData);
    },

    // // 筛选图例点击显隐
    // changeTuliPolygon(){
    //   console.log(this.tuliPolygonData,"this.tuliPolygonData");
    // },

    // 点击图例触发事件
    async tuliClick(val) {
      val.active = !val.active;
      console.log(val.type, "点击图例的值");
      // delete val.active
      // console.log(val, "点击图例更新的值");
      let valType = val.type == "其他" ? null : val.type;
      let text = this.tuliData[this.tuliData.length - 1].layer_chinese_name;
      console.log(text, "text");
      console.log(
        this.tuliPolygonData[text],
        "过滤前this.tuliPolygonData[text]"
      );
      console.log(
        this.tuliPolylineData[text],
        "过滤前this.tuliPolylineData[text]"
      );
      let a = this.tuliPolygonData[text].filter((item) => {
        // console.log(valType, "valType");
        // return item.userData == valType;
        console.log(JSON.parse(item.userData).type,"itemUserdata");
        return JSON.parse(item.userData).type == valType;
      });
      console.log(a, "过滤后的polygonData");
      let polygonDataID = [];
      a.forEach((element) => {
        // console.log(element,"element的值");
        polygonDataID.push(element.id);
      });

      let b = this.tuliPolylineData[text].filter((item) => {
        return JSON.parse(item.userData).type == valType;
      });
      console.log(b, "过滤后的PolylineData");
      let polylineDataID = [];
      b.forEach((element) => {
        polylineDataID.push(element.id);
      });

      console.log(polygonDataID, "polygonDataID");
      console.log(polylineDataID, "polylineDataID");

      if (val.active == true) {
        __g.polygon.show(polygonDataID);
        __g.polyline.show(polylineDataID);
      } else if (val.active == false) {
        __g.polygon.hide(polygonDataID);
        __g.polyline.hide(polylineDataID);
      }
    },

    // 根据对象去重的方法
    arrayUnique(arr) {
      const result = [];
      const obj = [];
      for (let i = 0; i < arr.length; i++) {
        if (!obj[arr[i].type]) {
          result.push(arr[i]);
          obj[arr[i].type] = true;
        }
      }
      console.log(result, "数组去重后，result的值");
      return result;
    },
  },
  mounted() {
    this.getData();
    //筛选图例点击显隐
    // this.changeTuliPolygon();
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  // height: 100%;
  max-height: 600px;
  background: linear-gradient(
    -90deg,
    rgba(12, 19, 36, 0.6) 0%,
    rgba(1, 28, 73, 0.3) 100%
  );
  border-radius: 4px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    // background: -webkit-gradient(
    //             linear,
    //             left top,
    //             left bottom,
    //             from(#83a6a6),
    //             to(#483d8b)        
    // );
    // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
    background: linear-gradient(
      180deg,
      rgba(131, 166, 166, 0.1),
      rgba(131, 166, 166, 0.8),
      rgba(131, 166, 166, 0.1)
    );
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
  .hexs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column-reverse;
    .hex {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 10px;
      cursor: pointer;
      .color {
        width: 50px;
        height: 20px;
        margin-right: 40px;
      }
      .text {
        width: calc(100% - 50px);
        flex: 1;
      }
    }
  }
}
</style>
